Copper.TaskRing = function(config) {
    config.drawFunc = function() {
        var context = this.getContext();
        context.beginPath(); 
        if(!this.isSelected){
            context.arc(Copper.Global.centerX, Copper.Global.centerY, Copper.Global.clockRaius, this.startAngle, this.endAngle, false); // outer (filled) 
            context.arc(Copper.Global.centerX, Copper.Global.centerY, Copper.Global.clockRaius - 10, this.endAngle, this.startAngle, true); // inner (unfills it) 
        } else {
            context.arc(Copper.Global.centerX, Copper.Global.centerY, Copper.Global.clockRaius - 10, this.startAngle, this.endAngle, false); // outer (filled) 
            context.arc(Copper.Global.centerX, Copper.Global.centerY, Copper.Global.clockRaius + 
                Copper.Global.clockBorderWidth + 10, this.endAngle, this.startAngle, true); // inner (unfills it)
        }
        context.fillStyle = this.fillStyle;
        context.fill();
        context.closePath();
    };
    
    this.fillStyle = 'rgba(0,0,0,0.2)';
    this.isSelected = config.isSelected? true: false;;
    //this.taskId = config.taskId;
    
    // call super constructor
    Kinetic.Shape.apply(this, [config]);
};

Copper.TaskRing.prototype = {

    _draw: function(layer) {
        //layer.add(this.circle);
        Kinetic.Shape.prototype._draw.apply(this, [layer]);    
    },
    
    getFillStyle: function(){
        return this.fillStyle;
    },
    
    setFillStyle: function(fillStyle){
        this.fillStyle = fillStyle;
    },
    
    setStartAngle: function(startAngle){
        this.startAngle = startAngle;
    },
    
    setEndAngle: function(endAngle){
        this.endAngle = endAngle;
    },
    
    toggle: function(){
        this.isSelected = !this.isSelected;
        this.fillStyle = this.isSelected? 'white': 'rgba(0,0,0,0.2)';
    }    

};
// extend Shape
Kinetic.GlobalObject.extend(Copper.TaskRing, Kinetic.Shape);


